<template>
  <!-- 确认提示框 -->
  <el-dialog :title="title" :visible.sync="visible" :before-close="handleAction" width="340px" center>
    <div class="del-dialog-cnt t-a-c" v-html="content"></div>
    <span slot="footer" class="dialog-footer">
          <el-button class="font-c" size="small" @click="handleAction('yes')">{{yesBtnText}}</el-button>
          <el-button class="font-c" size="small" @click="handleAction('cancel')">{{cancelBtnText}}</el-button>
    </span>
  </el-dialog>
</template>

<script>
  // import $ from 'jquery'
  // import $ from 'expose?jQuery!jquery'
  export default {
    name: "MyConfirm",
    data() {
      return {
        visible: false,
        title: '',
        content: '',
        yesBtnText: '确定',
        cancelBtnText: '取消',
        type: '',
        promiseStatus: null,
      }
    },
    watch: {
      visible: function (curVal) {
        if (curVal && document.body.scrollHeight > window.innerHeight) {
          //$('body').addClass('backdrop-open');
          document.getElementsByTagName('body')[0].classList.add("snow-container");
        } else {
          //$('body').removeClass('backdrop-open');
          document.getElementsByTagName('body')[0].className = '';
        }
      }
    },
    methods: {
      confirm() {
        let _this = this;
        this.visible = true;
        return new Promise(function (resolve, reject) {
          _this.promiseStatus = {resolve, reject};
        });
      },
      handleAction(action) {
        this.visible = false;
        if (action === 'yes') {
          this.promiseStatus && this.promiseStatus.resolve();
        } else {
          this.promiseStatus && this.promiseStatus.reject();
        }
      }
    }
  }
</script>
